<template>
  <div>
    <!-- @keySearch = "search" -->
    <Head :keyVal="keyName" />
    <div class="main">
      <Content
        v-loading="loading"
        element-loading-text="拼命加载中"
        :list="list"
        :pageSize="pageSize"
        :count="count"
        :currentPage="page"
      />
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          :page-size="pageSize"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Content from "../components/Content.vue";
import Head from "../components/Head.vue";
import { getBlog } from "@/http/api/blog";
export default {
  components: { Head, Content },
  data() {
    return {
      list: [],
      count: 0,
      page: 1,
      keyName: "",
      loading: true,
      pageSize: 10,
    };
  },
  created() {
    const { keyname, page } = this.$route.query;
    this.keyname = keyname;
    this.page = page ? +page : 1;
    this.getData();
  },
  //   watch:{
  //       '$route':function(){
  //           const {keyname,page} =this.$route.query
  //           this.keyName = keyname;
  //           this.page = page ?  +page : 1;
  //           this.getData();
  //       }
  //   },
  beforeRouteUpdate(to, from, next) {
    this.setDate(to.query);
    this.getDate();
    next();
  },
  methods: {
    setDate(val) {
      const { keyname, page } = val;
      this.keyName = keyname;
      this.page = page ? +page : 1;
    },
    getDate() {
      const params = {
        page: this.page,
        number: this.pageSize,
        keyname: this.keyName,
      };
      getBlog(params).then((res) => {
        if (res.code === 0) {
          this.count = res.count;
          this.list = res.data;
        }
        this.loading = false;
      });
    },
    changePage(page){
      const obj = {...this.$route.query};
      obj.page = page;
      let name = this.$route.name;
      this.$router.push({ name,query:obj});
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../theme/style.scss";
.main {
  width: $content_w;
  margin: 0 auto;
  margin-top: 25px;
   .page{
       text-align: center;
        margin: 50px 0;
    }
}
</style>